<template>
	<view class="columnY container">
		<view class="login-center">
			<view class="form-top pad-left-right-60 flex pad-top-24">
				<my-image radius="10rpx" src="https://file.xyljz.cn/upload/2024/11/20/17321072908588205.png"
					width="245rpx" height="231rpx"></my-image>
				<view class="mar-left-47 mar-top-42">
					<view class="font-36 color-text">欢迎使用 心宇利家政</view>
					<view class="font-30 mar-top-30 color-646464">上门服务，满意为止</view>
				</view>
			</view>
			<view class="radius50 form-box pad-30 font-34">
				<up-form class="mar-top-30" labelWidth="200" labelPosition="top" :model="formData" :rules="rules"
					ref="ruleFrom">
					<!-- 账号 -->
					<up-form-item label="账号" prop="tel" borderBottom="true">
						<up-input type="number" clearable placeholderClass="input-style" placeholder="请输入手机号"
							v-model="formData.tel" border="none"></up-input>
					</up-form-item>
					<!-- 验证码 -->
					<up-form-item v-if="!isLoginType" label="验证码" prop="sms_code" class="mar-top-40"
						borderBottom="true">
						<up-input type="number" clearable placeholderClass="input-style" placeholder="请输入验证码"
							v-model="formData.sms_code" border="none">
							<template #suffix>
								<text v-if="codeTime == 60" @click="hanldeCode" type="primary" color="#000000"
									:customStyle="{width: '300rpx'}">获取验证码</text>

								<text v-else type="primary" :plain="true" color="#000000"
									:customStyle="{width: '300rpx'}">{{ codeText }}</text>
							</template>
						</up-input>
					</up-form-item>
					<!-- 密码 -->
					<up-form-item v-else label="密码" prop="login_secret" class="mar-top-40" borderBottom="true">
						<up-input clearable :type="showPassword ? 'text' :'password'" placeholderClass="input-style"
							placeholder="请输入密码" v-model="formData.login_secret" border="none">
							<template #suffix>
								<up-icon color="#888888" size="20" class="icon" @click="changePassword"
									:name="showPassword ? 'eye-fill' : 'eye-off'" />
							</template>
						</up-input>
					</up-form-item>
				</up-form>
				<view @click="isLoginType = !isLoginType" class="color-primary font-26 mar-top-20">
					{{isLoginType? '验证码登录': '密码登录'}}
				</view>
			</view>
		</view>
		<view class="login-buttom pad-30">
			<up-button :customStyle="customStyle" class="font-32 mar-top-10" shape="circle"
				@click="submit">登录</up-button>
			<view class="text-center color-646464 mar-top-30 font-26">没有注册的手机号输入验证码将会自动注册</view>
			<view class="mar-top-120">
				<agreement @hanldeCheckbox="hanldeCheckbox" :checkbox="checkbox"></agreement>
			</view>
			<view>
				<!-- 	<view @click="hanldeRegister" class="text-center mar-top-80 font-28">没有账号去，<text
						class="color-primary">注册</text></view> -->
			</view>
		</view>
		<my-popup title="服务协议与隐私协议" content="为保证您的合法权益,请阅读同意《服务协议》和《隐私协议》" :show="isPopup" @cancel="isPopup = false"
			@confirm="hanldeConfirm"></my-popup>
	</view>
</template>

<script setup>
	import agreement from '@/components/agreement/agreement.vue'
	import util from '@/util/share.js';
	import { reactive, ref } from 'vue'
	import { onLoad, onShareAppMessage } from '@dcloudio/uni-app'
	import { postLogin, postSendCode, postLoginSms } from '@/api/currency.js'
	import { dataReportFun } from '@/util/dataReport.js'

	onLoad((option) => {
		dataReportFun({
			event: "client.page_view",
		})
	})
	// 分享
	onShareAppMessage(() => {
		return util.onShare({
			path: `/pages/login/login`
		})
	})

	const formData = reactive({
		tel: '',
		login_secret: '',
		sms_code: '',
		ref_query: util.getRefQuery()
	})


	const customStyle = ref({
		background: "linear-gradient(270deg, #0055FE 0%, #5E94FF 100%)",
		color: "white",
		height: "100rpx"
	})

	const checkbox = ref(false);
	const regionalPhoneVisibel = ref(false)
	const ruleFrom = ref(null)
	// 表单校验规则
	const rules = ref({
		tel: [{
			required: true,
			message: '请输入手机号',
			trigger: 'blur'
		}],
		login_secret: [{
				required: true,
				message: '请输入密码',
				trigger: 'blur'
			},
			{
				min: 6,
				message: '密码最少6位',
				trigger: 'blur'
			}
		],
		sms_code: [{
			required: true,
			message: '请输入短信验证码',
			trigger: 'blur'
		}]
	})

	// 协议
	const hanldeCheckbox = (event) => {
		checkbox.value = !checkbox.value;
	}

	// 确定勾选
	const isPopup = ref(false);
	const hanldeConfirm = () => {
		checkbox.value = true;
		isPopup.value = false;
	}

	// 切换登录方式
	const isLoginType = ref(false);
	// 获取验证
	let codeTime = ref(60);
	let codeText = ref(`获取验证码`);
	let inter = ref(null);
	const hanldeCode = async () => {
		if (formData.tel == "") {
			uni.showToast({
				title: '手机号不能为空',
				icon: 'none'
			})
			return
		}
		const res = await postSendCode({
			tel: formData.tel,
			scene: 23
		})

		if (res.code == 200) {
			clearInterval(inter.value);
			codeTime.value -= 1;
			codeText.value = `${codeTime.value}秒重新获取`;
			inter.value = setInterval(() => {
				codeTime.value -= 1
				codeText.value = `${codeTime.value}秒重新获取`;
				// 倒计时完成
				if (codeTime.value <= 0) {
					codeTime.value = `获取验证码`;
					codeTime.value = 60;
					clearInterval(inter.value);
				}
			}, 1000);
		}
	}

	// 登录
	const submit = async () => {
		ruleFrom.value.validate().then(async valid => {
			if (valid) {
				if (!checkbox.value) {
					isPopup.value = true;
					return
				}

				// 密码登录
				if (isLoginType.value) {
					const res = await postLogin(formData);
					if (res.code === 200) {
						uni.$u.toast('登录成功');
						// 储存token
						uni.setStorageSync('jwt_token', res.data.jwt);
						uni.setStorageSync('refresh_token', res.data.refresh_token);

						uni.switchTab({
							url: '/pages/index/index'
						})
					}
				} else {
					const sms = await postLoginSms(formData);
					if (sms.code === 200) {
						uni.$u.toast('登录成功');
						// 储存token
						uni.setStorageSync('jwt_token', sms.data.jwt);
						uni.setStorageSync('refresh_token', sms.data.refresh_token);

						uni.switchTab({
							url: '/pages/index/index'
						})
					}
				}


			}
		}).catch(error => {
			console.log('失败:', error);
		})
	}

	// 跳转注册
	const hanldeRegister = () => {
		uni.navigateTo({
			url: '/pages/register/register'
		})
	}

	// 查看密码
	let showPassword = ref(false);
	const changePassword = () => {
		showPassword.value = !showPassword.value;
	}

	const hanldeChoice = () => {
		uni.navigateTo({
			url: '/pages/locale/locale'
		})
	}
</script>

<style scoped>
	.container {
		/* height: 100vh; */
		position: relative;
	}

	.login-center {
		/* flex-grow: 1; */
		background: white;
	}

	.logo {
		display: block;
		width: 245rpx;
		height: 231rpx;
	}

	:deep(.u-form-item) {
		margin-top: 40rpx !important;
	}

	.form-top {
		background: linear-gradient(180deg, #ECF5FF 0%, #F4F6F8 100%);
		background-size: cover;
		height: 450rpx;
	}

	.form-box {
		margin-top: -200rpx;
		position: relative;
		background: white;
	}

	.login-buttom {
		background: white;
	}
</style>